<template>
  <div class="UpdateMyInfor">
    <van-nav-bar
        title="编辑个人信息"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="content">
      <van-cell-group>
        <van-field v-model="phone" type="tel" label="手机号" disabled/>
        <van-field v-model="name" label="昵称"/>
        <van-field name="img" label="头像上传">
          <template #input>
            <van-uploader v-model="img"/>
          </template>
        </van-field>
      </van-cell-group>

      <div class="center">
        <van-button type="info" @click="SubmitBtn">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapActions} from "vuex";
import {Toast} from "vant";

export default {
  name: "UpdateMyInfor",
  mounted() {
    this.phone = this.userPhone;
    this.name = this.userName;
  },
  computed: {
    ...mapGetters(['userPhone', 'userName'])
  },
  data() {
    return {
      img: [],
      phone: '',
      name: "",
    };
  },
  methods: {
    ...mapActions(['setUserName']),
    onClickLeft() {
      this.$router.push("/MyInfor");
    },
    SubmitBtn() {
      this.$dialog
          .confirm({
            title: "确认编辑",
            message: "请确认是否保存修改后的相关信息",
          })
          .then(() => {
            this.setUserName(this.name);
            Toast.success('修改成功！');
            this.$router.push('/myinfor')
          })
          .catch(() => {
          });
    },
  },
};
</script>

<style scoped>
.center {
  display: flex;
  justify-content: center;
}
</style>
